<template>
	<view class="myBox">
		<view class="imgBoxs">
			<view class="nav_title">
				<!-- <image class="imgBoxl" :src="url"></image> -->
				<view class="nameBox">{{infoObj.nickName}}</view>
				<view class="nameBoxPay"><text>￥</text>{{infoObj.promotionSum}}</view>
			</view>
			<view class="boxFooter">
				<view class="leftBox box_fo">
					<view>昨日收益</view>
					<view class="numPay">￥{{infoObj.promotionYesterday || 0}}</view>
				</view>
				<view class="rightBox box_fo">
					<view @click="goTotalFn()">累计已提
					<!-- <uni-icons type="right" color="white" size="12"
							style="color:#f0eeeb"></uni-icons> -->
					</view>
					<view class="numPay">￥{{infoObj.promotionWithdraw || 0}}</view>
				</view>
			</view>

		</view>
		<view class="box_footer">
			<view class="itemBox" @click="showPoster">
				<image class="boxImg" src="/static/businessCard.png" />
				<view class="bgColor">推广人名片</view>
			</view>
			<view class="itemBox" @click="yjshowPosterFn">
				<image class="boxImg" src="/static/promotion1.png" />
				<view class="bgColor">佣金明细</view>
			</view>
		</view>


		<view class="xijBox" :class="infoObj.promotionSum == 0 ? 'noActive' : ''" @click="tixFns()">立即提现</view>

		<!-- 海报 -->
		<posterGeneration ref="posterGeneration"></posterGeneration>
	</view>
</template>

<script>
	import {
		getTgInfo,
		txFn,
	} from "@/request/api.js";
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				indexed: 0,
				arrayList: [],
				url: "",
				infoObj: {},
			}
		},
		onLoad(option) {
			let that = this
			that.getTgInfo()
			that.url = option.url
			console.log(option, 'optionoption');
		},
		methods: {
			showPoster() {
				this.$refs.posterGeneration.getQrcode()
			},
			yjshowPosterFn() {
				util.goToUrl('/pages/myPage/yjdelaPage/yjdelaPage?name=' + this.infoObj.nickName);
			},
			//立即提现
			async tixFns() {
				let that = this
				console.log(that.infoObj.promotionSum, 'that.infoObj.promotionSum');
				if (that.infoObj.promotionSum == 0) {
					return
				}
				let res = await txFn({
					method: "GET",
					data: {
						value: that.infoObj.promotionSum
					},
				})
				if (res.code == 200) {
					console.log(res, 'res3ww3333')
					uni.showToast({
						title: res.message,

					});
					that.getTgInfo()
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			},
			goTotalFn() {
				let that = this
				util.goToUrl('/pages/myPage/totalPage/pageIndex/pageIndex');
			},
			//获取优惠券信息
			async getTgInfo() {
				let that = this
				let res = await getTgInfo({
					method: "GET",
					data: {
						type: that.getUserId()
					},
				})
				if (res.code == 200) {
					console.log(res, 'res3ww3333')
					// res.result.promotionSum = 10
					// res.result.promotionWithdraw =res.result.promotionWithdraw/1000
					that.infoObj = res.result
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			},

			//获取userId
			getUserId() {
				let token = uni.getStorageSync('token').split('.')
				let userinfo = token[1].replace(/-/g, '+').replace(/_/g, '/')
				// 解码base
				let info = new Buffer(userinfo, 'base64').toString('utf8')
				let userId = JSON.parse(info).username.split('token_')[1]
				return userId
			},
		}
	}
</script>

<style lang="scss" scoped>
	.iconBg {
		color: #f0eeeb;
	}

	.myBox {
		height: calc(100vh - 30rpx);
		// background-color: #f0eeeb;
		background: linear-gradient(to bottom, #ec5d21, #fff 50%);
		padding-top:30rpx;
		.imgBoxs {
			position: relative;
			// width: 100%;
			background-color: #EB5B1E;
			border-radius:30rpx;
			margin:0 30rpx 30rpx;
			padding: 30rpx 60rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.nav_title {
				display: flex;
				flex-direction: column;
				align-items: center;

				// .imgBoxl {
				// 	width: 100rpx;
				// 	height: 100rpx;
				// 	border-radius: 50%;
				// }

				.nameBox {
					color: #fff;
					font-size: 40rpx;
					margin-bottom: 30rpx;
				}

				.nameBoxPay {
					color: #fff;
					font-size: 64rpx;
					margin-bottom: 30rpx;
					text{
						font-size: 48rpx;
					}
				}
			}

			.boxFooter {
				display: flex;
				justify-content: space-between;

				.box_fo {
					display: flex;
					font-size: 28rpx;
					color: #fff;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #f0eeeb;
					// font-weight: 600;
					.numPay {
						margin-top: 10rpx;
					}
				}
			}

			

			
		}
	}

	.box_footer {
		display: flex;
		margin:0 30rpx;
		justify-content: space-between;

		.itemBox {
			width: 334rpx;
			height: 318rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			background: #ffffff;
			box-shadow: 0px 0px 16px rgba(0,0,0,.1);
			
			.boxImg {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
			}

			.bgColor {
				font-size:40rpx;
				color:#232323;
			}
		}
	}
	
	.xijBox {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		// right: 0;
		bottom:140rpx;
		width: 690rpx;
		height:90rpx;
		line-height: 90rpx;
		border-radius: 52rpx;
		background-color: #FD6816;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}
	
	.noActive {
		background: #ccc;
	}
</style>